import Footer from '../../components/footer/footer';
import React, { useState, useEffect } from 'react';
import '../My/my.css';
import { List, Image } from 'antd';
import {
  BookOutlined,
  PlusSquareOutlined,
  RightOutlined,
  FileDoneOutlined,
  WalletOutlined,
  UnorderedListOutlined,
  SettingOutlined,
  ChromeOutlined
} from '@ant-design/icons';
const data = [
  { key: 1, name: 'Name' },
  { key: 2, name: 'DOB' },
  { key: 3, name: 'Gender' },
  { key: 4, name: 'Phone Number' },
  { key: 5, name: 'Email' },
  { key: 6, name: 'Address:' },
  { key: 7, name: 'Change Password' },
  { key: 8, name: 'Click to Save' },
]
function My() {
  useEffect(() => {
  }, [])
  const data = [
    { name: 'Name', message: 'XXX', icon: <BookOutlined />, icon1: <RightOutlined /> },
    { name: 'DOB', message: 'XXX', icon: <PlusSquareOutlined />, icon1: <RightOutlined /> },
    { name: 'Gender', message: 'XXX', icon: <PlusSquareOutlined />, icon1: <RightOutlined /> },
    { name: 'Phone Number', message: 'XXX', icon: <FileDoneOutlined />, icon1: <RightOutlined /> },
    { name: 'Email', message: 'XXX', icon: <WalletOutlined />, icon1: <RightOutlined /> },
    { name: 'Address', message: 'XXX', icon: <UnorderedListOutlined />, icon1: <RightOutlined /> },
    { name: 'Change Password', message: 'XXX', icon: <SettingOutlined />, icon1: <RightOutlined /> },
    { name: 'Click to Save', message: 'XXX', icon: <SettingOutlined />, icon1: <RightOutlined /> }
  ];
  const jump = (item) => {
    console.log(`跳转到${item}页面`);
  }
  return (
    <div className="App">
      <List
        size='large'
        bordered
        dataSource={data}
        renderItem={(item) => (
          <List.Item onClick={() => jump(item.name)}>
            {item.icon}
            <List.Item.Meta style={{ marginLeft: '.625rem' }}
              description={<span style={{ color: 'white' }}>{item.name}<span style={{float:'right',color:'white'}}>{item.message}</span></span>}
            />
            {item.icon1}
          </List.Item>
        )}
      />
      <Footer />
    </div>
  );
}

export default My;
